<template>
  <Line ref="chart" :data="computedChartData" :options="options" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Line } from 'vue-chartjs'
import type { ChartOptions } from 'chart.js'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  PointElement,
  CategoryScale,
  Filler,
} from 'chart.js'
import { TLineChartData } from '../../../data/types'
import { computed } from 'vue'
import { useColors } from 'vuestic-ui/web-components'

ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, Filler)

const chart = ref<typeof Line>()

const props = defineProps<{
  data: TLineChartData
  options?: ChartOptions<'line'>
}>()

const ctx = computed(() => {
  if (!chart.value) {
    return null
  }

  return chart.value.chart?.ctx ?? null
})

const { setHSLAColor, getColor } = useColors()

const colors = ['primary', 'success', 'danger', 'warning']

const computedChartData = computed<TLineChartData>(() => {
  if (!ctx.value) {
    return props.data
  }

  const makeGradient = (bg: string) => {
    const gradient = ctx.value!.createLinearGradient(0, 0, 0, 90)
    gradient.addColorStop(0, setHSLAColor(bg, { a: 0.4 }))
    gradient.addColorStop(1, setHSLAColor(bg, { a: 0.0 }))
    return gradient
  }

  const datasets = props.data.datasets.map((dataset, index) => {
    const color = getColor(colors[index % colors.length])

    return {
      ...dataset,
      fill: true,
      backgroundColor: makeGradient(color),
      borderColor: color,
      pointRadius: 0,
      borderWidth: 2,
    }
  })

  return { ...props.data, datasets }
})
</script>
